import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import ElementUI from "element-ui"; //核心js
import "element-ui/lib/theme-chalk/index.css"; //element-ui css文件
import "./assets/styles/common.css";
import "./assets/styles/iconfont.css" //字体图标
import store from "./store";
import bus from "@/utils/eventBus.js"
Vue.prototype.$bus = bus;
// import qfSubMenu from "qf-sub-menu"
// import qfSubMenu from "qf-sub-menu2";
Vue.use(ElementUI);
// Vue.use(qfSubMenu);
// Vue.config.productionTip = false;

//路由守卫
//核心:路由全局前置钩子beforeEach



router.beforeEach(function (to, from, next) {
  //判断本地存储中是否有token,如果有就next,如果没有就跳转到登入页
  let token = localStorage.getItem("yf-token");
  //如果用户访问的是login页面,直接放行,如果是其它页面,那么需要验证是否有token,如果没有跳转到login,如果有直接放行
  if (to.path === "/login") {
    next();
  } else {
    if (token) {
      //判断下vuex中 store里面的sideMenu数组的长度是否为0;如果是,那么重新调用action中获取用户菜单的方法,计算用户菜单,并且渲染
      let { sideMenu } = store.state;
      // // let { FETCH_MENULIST } = store.acitons;

      // // console.log(sideMenu);
      if (sideMenu && sideMenu.length === 0) {
        //防止空指针
        //调用action中获取用户菜单的方法
        store.dispatch("FETCH_MENULIST").then(() => {
          //放行
          // console.log('已放行');
          next({ path: to.path }); //这里要注意, next里面要传参数即要进入的页面的路由信息，因为next传参数后，当前要进入的路由会被废止，转而进入参数对应的路由，虽然是同一个路由，这么做主要是为了确保addRoutes生效了。
        });
      } else {
        next();
      }
    } else {
      //没有token 跳转到登入
      next({ path: "/login" });
    }
  }

  // console.log(to)
  // console.log(from)
  // next()
});

//全局后置钩子
router.afterEach((to, from) => {
  console.log(to);
  //干掉第0项
  let breadCrumb = [...to.matched];
  breadCrumb.splice(0, 1);
  console.log(breadCrumb);
  store.commit("SET_BREADCRUMB", breadCrumb);
});

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
